/*
  学习目标：08-redux基础-使用actionCreator维护type
*/

import { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addActionCreator, desActionCreator } from './store/action';

// import store from './store/index'

export default function App() {
    const [show, setShow] = useState(true);
    return (<div>
        <h1>Redux基础案例</h1>
        <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
        {show ? <Son /> : null}
    </div>)
}

function Son() {
    // 4. 使用useSelector((state) => 返回值 )， 取出state
    const count = useSelector((state) => state.count)
    // 5. 使用dispatch改变状态，使用useDispatch()
    const dispatch = useDispatch()
    return (
        <div>
            <h2>子组件</h2>
            <h2>count:{count}</h2>
            {/* 💥 Redux根视图没有任何关系，与React也没有绑定关系 */}
            {/* Action是一个对象，可以传多个键过去，payload通常代表参数 */}
            {/* 不建议自定义健明，约束payload作为传参的键名 */}
            <button onClick={() => dispatch(addActionCreator(1))}>+1</button>
            <button onClick={() => dispatch(desActionCreator(1))}>-1</button>
            <button onClick={() => dispatch(addActionCreator(10))}>+10</button>
            <button onClick={() => dispatch(desActionCreator(10))}>-10</button>
        </div>
    );
}